<template>
  <div>
    <div>
      <span class="serial">第{{serial}}题&emsp;&emsp;</span>
      <span class="title" >{{title}}&emsp;&emsp;</span>
      <span v-if="type === 'radio'" class="type">【单选题】</span>
      <span v-else class="type">【多选题】</span>

    </div>
    <br>
    <div>
      <el-table :data="options" style="width:60%;" border stripe class="table">
        <el-table-column sortable align="center" prop="text" label="选项" ></el-table-column>
        <el-table-column sortable align="center" prop="optionAmount" label="小计" ></el-table-column>
        <el-table-column prop="ratio" label="比例" align="center" >
          <template #default="scope">
            <el-progress :text-inside="true" :stroke-width="26"
                         :percentage="Number(scope.row.ratio)" :color="getColor(scope.row.ratio)"></el-progress>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <span style="font-weight: bolder">本题有效填写人次：{{questionAmount}}</span>
    </div>
  </div>
  <br>
  <graph :options="this.options"></graph>


</template>

<script>
import Graph from "../views/PaperView/components/Graph"
export default {
  name: "Choice",
  components: {
    Graph
  },
  props: {
    serial: Number,
    title: String,
    questionAmount: Number,
    type: String,
    options: Array,
  },
  mounted() {
    this.getOptions()
  },

  methods: {
    getOptions() {
      this.options.forEach(e => {
        if (this.questionAmount === 0) {
          e.ratio = 0
        } else e.ratio = (e.optionAmount / this.questionAmount * 100).toFixed(2)
      })
    },
    getColor(ratio) {
      if(ratio <= 20) {
        return 'red'
      } else if (ratio <= 40) {
        return 'orange'
      } else if (ratio <= 60) {
        return 'cadetblue'
      } else if (ratio <= 80) {
        return 'mediumturquoise'
      } else return 'mediumslateblue'
    },

  }
}
</script>

<style scoped >
.serial {
  color: #666666;
  font-weight: bold;
}

.table {
  width: 80%;
}


</style>